<template>
  <div class="home">
    <van-nav-bar class="nav-top">
      <van-button class="search-btn" round type="info" size="small" slot="title" icon="search">
        搜索
      </van-button>
    </van-nav-bar>

    <van-tabs class="tabs" v-model="active" swipeable animated>
      <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
        <article-list :channel="channel" />
      </van-tab>
      <!-- 因为更多图标设置了固定定位，所以不占有位置，底下的内容会被遮挡，所以设置一个占位符 -->
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="more-btn">
        <i class="iconfont toutiaogengduo"></i>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { getList } from '@/api/user';
import ArticleList from './component/article-list';

export default {
  data() {
    return {
      active: 0,
      channels: [],
    };
  },
  components: {
    ArticleList,
  },
  created() {
    this.loadList();
  },
  computed: {},
  methods: {
    async loadList() {
      try {
        const { data } = await getList();
        this.channels = data.data.channels;
        // console.log(this.channels);
      } catch (err) {
        this.$toast('获取数据失败，请稍后重试');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 100px;
  .nav-top {
    /deep/ .van-nav-bar__title {
      max-width: unset;
    }
    .search-btn {
      width: 555px;
      height: 64px;
      font-size: 28px;
      background-color: #55a8ff;
      border: none;
      .van-icon {
        font-size: 35px;
      }
    }
  }
  /deep/ .tabs {
    .van-tabs__wrap {
      height: 82px;
    }
    .van-tab {
      min-width: 200px;
      border-right: 1px solid #f5f5f5;
      font-size: 30px;
      color: #777;
    }
    .van-tab--active {
      color: #333;
    }
    .van-tabs__line {
      bottom: 8px;
      width: 31px;
      background-color: #3296fa;
    }
    .van-tabs__nav {
      padding-bottom: 0;
    }
    .placeholder {
      // 默认是1，参与剩余空间计算，这里设置为0，不参与
      flex-shrink: 0;
      width: 66px;
      height: 82px;
    }
    .more-btn {
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;
      background-color: #fff;
      opacity: 0.8;
      .toutiaogengduo {
        font-size: 33px;
      }
      &:before {
        content: '';
        background: url('~@/assets/gradient-gray-line.png');
        width: 2px;
        height: 100%;
        position: absolute;
        left: 0;
        background-size: contain;
      }
    }
  }
}
</style>
